<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>项目管理</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="assets/js/jquery.js"></script>
</head>
<body>
<div class="container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
        <div class="toolbar-title" style="display:flex;gap:10px;">
            <h4>项目管理</h1>
            <button class="btn btn-sm " onclick="window.location.href='index.php'" >首页</button>
        </div>
        <div class="toolbar-actions">
            <a href="?action=logout" class="toolbar-btn danger">
                <i class="fa-solid fa-sign-out-alt"></i>
                <span>退出</span>
            </a>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="sidebar" style="width: 100%; ">
                <div class="panel">
                    <div class="panel-title">创建新项目</div>
                    <form method="post">
                        <input type="hidden" name="action" value="create_project">
                        <div class="form-group">
                            <label class="form-label" for="canvas_name">项目名称</label>
                            <input type="text" class="form-input" id="canvas_name" name="canvas_name" required
                                   placeholder="例如：官网首页原型、APP个人中心">
                        </div>
                        <button type="submit" class="btn btn-primary" style="width:100%;">创建项目</button>
                    </form>
                </div>
                <!-- 新建画板表单（默认隐藏） -->
                <div class="tree-form" id="newCanvasForm" style="display:none; padding: 10px;">
                    <div>
                        修改项目名称
                    </div>
                    <input type="text" class="form-input" id="newCanvasName" placeholder="输入画板名称">
                    <div style="display: flex; gap: 5px; margin-top: 8px;">
                        <button class="btn btn-sm btn-primary" id="confirmCreateCanvas">确认</button>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-title">项目列表（共 <?php echo count($data); ?> 个）</div>
                    <?php if (empty($data)): ?>
                        <div class="alert alert-success">暂无项目，点击上方按钮创建</div>
                    <?php else: ?>
                        <div class="area-list">
                            <?php foreach ($data as $project_id => $project): ?>
                            <div class="area-item" style="display: flex;  gap: 5px; ">
                                <a href="?action=edit_canvas&project_id=<?php echo $project_id; ?>"
                                   style="text-decoration: none; color: inherit; display:block;flex:1;">
                                    <div >
                                        <div class="area-item-name"><?php echo htmlspecialchars($project['name']); ?></div>
                                        <div class="area-item-meta">
                                            画板数量: <?php echo count($project['canvas_list']); ?> 个
                                        </div>
                                    </div>
                                </a>

                                    <button class="btn btn-sm btn-primary rename" data-pname="<?php echo htmlspecialchars($project['name']); ?>"  >重命名</button>
                 
                                    </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
    </div>
</div>

<!-- 核心功能JS -->
<script>
$(function(){
    $(".rename").on("click",function(){
        $("#newCanvasForm").show();
        $("#newCanvasName").val($(this).data('pname'));
    })
    
    $("#confirmCreateCanvas").on("click",function(){
        let project_id = '<?php echo $project_id; ?>'
        let newName = $("#newCanvasName").val().trim();
        fetch(window.location.href, {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: `action=rename_project&project_id=${project_id}&new_name=${encodeURIComponent(newName)}`
        }).then(() => {
            window.location.reload();
        });
    })
})

</script>
</body>
</html>